<template>
  <div style="position: absolute;right: 0.04rem;
    width: 3.5rem;
    height: 0.15rem;
    top: 0.04rem;
    z-index: 10;">
    <div class="flrt gr10" style="align-items: center;">
      <template v-for="(image, index) in aclist" :key="index" >
        <div v-if="image.isShow" style="padding: 0px 5px 0px 0px;display: flex;align-items: center">
          <el-tooltip
              class="box-item"
              effect="dark"
              :content="iconPo[index]"
              placement="top"
          >
            <i :style="index+1===activeIcon?'color:#5C7CFF':''"
               @mouseenter="handleMouseOver(index)"
               @mouseleave="handleMouseOut(index)"
               @click="handleClick(index)"
               alt="Image"
               :class="image.cs">
            </i>
          </el-tooltip>
        </div>
      </template>
      <el-dropdown @command="handleCommand" trigger="click" class="custom-dropdown">
        <span class="el-dropdown-link">
          <i class="iconfont icon-shejimulu"></i>
        </span>
        <template #dropdown>
          <el-dropdown-menu class="dropdownMenu">
            <el-dropdown-item command="a">
              <el-icon class="el-icon-bottom-left"><View /> </el-icon>查看SQL
            </el-dropdown-item>
<!--            <el-dropdown-item command="b">-->
<!--              <el-icon class="el-icon-bottom-left"><Download /> </el-icon>导入大屏-->
<!--            </el-dropdown-item>-->
<!--            <el-dropdown-item command="c">-->
<!--              <el-icon class="el-icon-bottom-left"><Share /> </el-icon>结果分享-->
<!--            </el-dropdown-item>-->
            <el-dropdown-item command="d">
              <el-icon class="el-icon-bottom-left"><Upload /> </el-icon>结果导出
            </el-dropdown-item>
<!--            <el-dropdown-item command="e">-->
<!--              <el-icon class="el-icon-bottom-left"><Headset /> </el-icon>使用反馈-->
<!--            </el-dropdown-item>-->
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>

    <div class="flrt gr10" style="align-items: center;">
      <el-icon v-if="!hidechartab" @click="hidetChartTab"><CaretRight /></el-icon>
      <el-icon v-else @click="hidetChartTab"><CaretLeft /></el-icon>
      <div v-for="(image, index) in charlist" :key="index" style="padding: 0 3px;display: flex;align-items: center">
        <!--<span>{{image}}</span>-->
        <el-tooltip
                v-if="activecharts == index || selectChart == index"
                class="box-item"
                effect="dark"
                :content="echartsName[index]"
                placement="top"
        >
          <span
                @mouseenter="handleMouseOver2(index)"
                @mouseleave="handleMouseOut2(index)"
                @click="selectCharts(index)"
                style="background-color: #bbbec4"
                >
            <svg class="icon" aria-hidden="true">
            <use v-bind:xlink:href="image.cs"></use>
          </svg>
          </span>
        </el-tooltip>

        <span v-else
              @mouseenter="handleMouseOver2(index)"
              @mouseleave="handleMouseOut2(index)"
              @click="selectCharts(index)">
            <svg class="icon" aria-hidden="true">
            <use v-bind:xlink:href="image.cs"></use>
          </svg>
          </span>
      </div>
    </div>
  </div>
</template>  
    
<script>
import Icontable from '@/assets/images/icon_table.png'
import Icontablehover from '@/assets/images/icon_table_hover@2x.png'
import Iconicon_zzt from '@/assets/images/icon_zzt@2x.png'
import Iconicon_zzthover from '@/assets/images/icon_zzt_hover@2x.png'

import Iconicon_txt from '@/assets/images/icon_txt@2x.png'
import Iconicon_txthover from '@/assets/images/icon_txt_hover@2x.png'
import Iconicon_zxt from '@/assets/images/icon_zxt@2x.png'
import Iconicon_zxthover from '@/assets/images/icon_zxt_hover@2x.png'
import Iconicon_bt from '@/assets/images/icon_bt@2x.png'
import Iconicon_bthover from '@/assets/images/icon_bt_hover@2x.png'

import Iconicon_ldt from '@/assets/images/icon_ldt@2x.png'
import Iconicon_ldthover from '@/assets/images/icon_ldt_hover@2x.png'

import Iconicon_like from '@/assets/images/icon_like@2x.png'
import Iconicon_likehover from '@/assets/images/icon_like_hover@2x.png'

import Iconiocn_nolike from '@/assets/images/iocn_nolike@2x.png'
import Iconiocn_nolikehover from '@/assets/images/iocn_nolike_hover@2x.png'

import Iconicon_view from '@/assets/images/icon_view@2x.png'
import Iconicon_viewhover from '@/assets/images/icon_view_hover@2x.png'

import Iconicon_more from '@/assets/images/icon_more@2x.png'
import Iconicon_morehover from '@/assets/images/icon_more_hover@2x.png'
export default {
  setup() {
    //动态加载css
    let cssPath="";
    let mode=localStorage.getItem("mode")
    if(mode=="dark"){
      cssPath = import("/src/assets/css/dark/index.scss");
    }else if(mode=="light"){
      cssPath = import("/src/assets/css/light/index.scss");
    }
    return {
      cssPath
    };
  },
  name: 'ShrinkingBox',
  props:{
    analysisEchcartsFlag:{
      type:Boolean,
      required:true
    }
  },
  data() {
    return {
      activeIcon:'',
      charlist: [
        { rs: Icontable, cs: '#icon-temp_dataTable' },//表格
        { rs: Iconicon_zzt, cs: '#icon-temp_bar'},//柱状图
        { rs: Iconicon_txt, cs: '#icon-temp_barSpecial' },//横向柱状图
        { rs: Iconicon_zxt, cs: '#icon-temp_line' },//折线图
        { rs: Iconicon_bt, cs: '#icon-temp_pie' },//饼图
        { rs: Iconicon_ldt, cs: '#icon-temp_radar' }//雷达图
      ],

      aclist: [
        { rs: Iconicon_like, cs: 'iconfont icon-tubiaozhizuomoban', isShow: true },
        { rs: Iconiocn_nolike, cs: 'iconfont icon-badreview-full', isShow: true },
        { rs: Iconicon_view, cs: 'iconfont icon-yanjing', isShow: this.analysisEchcartsFlag }
      ],
      echartsName:[
        '表格','柱状图','横向柱状图','折线图','饼图','雷达图',
      ],
      iconPo:[
        '满意','不满意','洞察分析'
      ],

      activecharts: '0', // 默认选中按钮1
      activemenu: -1,
      hidechartab: false, //隐藏chartab
      selectChart: 0 //默认的表格
    }
  },
  mounted() {
    console.log("analysisEchcartsFlag===========>",this.analysisEchcartsFlag)
  },
  methods: {
    handleCommand(command) {
      this.$emit('dropChange', command)
    },
    handleMouseOver(index) {
      this.activemenu = index
    },
    handleMouseOut(index) {
      this.activemenu = -1
    },
    handleMouseOver2(index) {
      this.activecharts = index
    },
    handleMouseOut2(index) {
      this.activecharts = this.selectChart
    },
    hidetChartTab() {
      this.hidechartab = !this.hidechartab
    },
    selectCharts(index) {
      this.selectChart = index
      this.activecharts = index
      this.$emit('chartSelect', index)
    },
    handleClick(index) {
      // debugger
      this.$emit('actionItemSelect', index)
    }
  },
  watch: {
    hidechartab(newIndex, oldIndex) {
      if (newIndex) {
        this.charlist = [{ rs: Icontable, cs: '#icon-temp_dataTable' }]
      } else {
        this.charlist = [
          { rs: Icontable, cs: '#icon-temp_dataTable' },//表格
          { rs: Iconicon_zzt, cs: '#icon-temp_bar'},//柱状图
          { rs: Iconicon_txt, cs: '#icon-temp_barSpecial' },//横向柱状图
          { rs: Iconicon_zxt, cs: '#icon-temp_line' },//折线图
          { rs: Iconicon_bt, cs: '#icon-temp_pie' },//饼图
          { rs: Iconicon_ldt, cs: '#icon-temp_radar' }//雷达图
        ]
      }
    },
    analysisEchcartsFlag(newIndex, oldIndex) {
      this.aclist[2].isShow=newIndex
    }
  }
}
</script>  
    
<style scoped>
.shrinking-box {
  width: 100px; /* 设置初始展示框宽度 */
  overflow: hidden; /* 隐藏超出部分的内容 */
  transition: width 2s; /* 设置宽度变化的过渡效果 */
}
.box-content {
  width: 100%; /* 确保内容始终填满展示框 */
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.moreclass {
  width: 15px;
  margin-left: 5px;
}
.flrow {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.gr10 {
  margin-right: 10px;
}
.icon{
  width: 1.2em;
  height: 1.2em;
  vertical-align: -0.2em;
  fill: currentColor;
  overflow: hidden;
}
</style>